<template>
  <div class="order-sta">
    <div v-if="!condition">
      <div class="el-header">
        <el-menu router background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item>订单统计</el-menu-item>
        </el-menu>
      </div>
      <!-- 统计列表 -->
      <div class="order-conter">
        <el-tag>订单统计</el-tag>
        <!-- 表单查询 -->
        <div class="order-from">
          <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" size="medium" class="demo-form">
            <el-form-item label="商户ID/名称:" size="mini" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="下单日期">
              <el-col :span="11">
                <el-form-item prop="date1" size="mini">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="1">至</el-col>
              <el-col :span="11">
                <el-form-item prop="date2" size="mini">
                  <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date2" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="行业：" prop="region">
              <el-select v-model="ruleForm.region" placeholder="全部" size="mini" width="80px">
                <el-option label="超市百货" value="shanghai"></el-option>
                <el-option label="奶茶加盟" value="beijing"></el-option>
                <el-option label="伪*点点" value="cs"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getid">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="resetForm(ruleForm)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 表单列表 -->
        <div class="order-data">
          <!-- 订单统计 -->
          <div class="tag-btn">
            <div>
              <el-tag>订单数量：{{ total }}</el-tag>
              <el-tag>订单总金额：{{ moneys }}</el-tag>
            </div>
            <div>
              <el-tag>退款/售后订单数量：{{ Refundnumber }}</el-tag>
              <el-tag>退款/售后率：{{ tk }}%</el-tag>
              <el-tag>确认退款订单数量：{{ Refunds }}</el-tag>
              <el-tag>确认退款；率：{{ qtk }}%</el-tag>
            </div>
          </div>
          <!-- 数据 -->
          <div class="order-message"></div>
          <el-table :data="tableDatas" style="width: 100%" height="500" stripe>
            <el-table-column prop="merchant_id" label="商户ID"> </el-table-column>
            <el-table-column prop="merchant_name" label="商户名称"> </el-table-column>
            <el-table-column prop="industry" label="行业"> </el-table-column>
            <el-table-column label="订单总数量">
              <template slot-scope="scope">
                <el-button round type="text" size="mini" @click="getorderlist(scope.row)">{{ scope.row.order_number }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="order_money" label="订单总金额"> </el-table-column>
            <el-table-column label="退款/售后订单数量" width="150">
              <template slot-scope="scope">
                <el-button round type="text" size="mini" @click="getrefundnumber(scope.row)">{{ scope.row.refund_number }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="refunds" label="退款/售后率"> </el-table-column>
            <el-table-column prop="number" label="确认退款订单数量" width="150"> </el-table-column>
            <el-table-column prop="confirm_money" label="确认退款金额" width="120"> </el-table-column>
            <el-table-column prop="confirms" label="确认退款率" width="180"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <orderlist v-else @close="condition = false" :id="id" ref="child" :refundnumbers="state" />
  </div>
</template>

<script>
import orderlist from './orderList'
export default {
  name: 'orderSta',
  props: [''],
  data() {
    return {
      state: 6,
      id: 0,
      moneys: 0,
      Refundnumber: 0,
      Refunds: 0,
      tk: 0,
      qtk: 0,
      condition: false,
      ruleForm: {
        name: '',
        date1: '',
        date2: '',
        region: ''
      },
      total: 0,
      rules: {
        name: [{ message: '请输入正确商户或者id', trigger: 'blur' }],
        region: [{ message: '请选择活动区域', trigger: 'change' }],
        date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }]
      },
      tableDatas: []
    }
  },

  components: {
    orderlist
  },
  created() {
    this.getorderSta()
  },
  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 获取数据
    async getorderSta() {
      const { data } = await this.$http.get('/orderSta')
      data.forEach(item => {
        this.total += item.order_number
        this.moneys += item.order_money
        this.Refundnumber += item.refund_number
        this.Refunds += item.number
      })
      this.tk = Math.round(((this.Refundnumber / this.total) * 10000) / 100)
      this.qtk = Math.round(((this.Refunds / this.total) * 10000) / 100)
      this.tableDatas = data
    },
    // 跳转调用子组件方法
    getorderlist(data) {
      this.condition = true
      this.id = data.merchant_id
      // 页面未渲染 延迟后调用
      setTimeout(() => {
        this.$refs.child.noworder()
      }, 0)
    },
    getrefundnumber(data) {
      this.condition = true
      this.id = data.merchant_id
      // 页面未渲染 延迟后调用
      setTimeout(() => {
        this.$refs.child.refundnumber()
      }, 0)
    },
    // 重置
    resetForm(ruleForm) {
      this.$refs.ruleForm.resetFields()
      this.getorderSta()
    },
    // 查询
    async getid() {
      // 先将数据清空
      if (this.ruleForm.name) {
        const { data } = await this.$http.get(`/orderSta?merchant_name_like=${this.ruleForm.name}`)
        const { data: data1 } = await this.$http.get(`/orderSta?merchant_id_like=${this.ruleForm.name}`)
        console.log(data)
        console.log(data1)
        if (data.length > 0) {
          this.tableData = data
        } else {
          this.tableData = data1
        }
      }
    }
  },

  watch: {}
}
</script>
<style lang="less" scoped>
.order-sta {
  width: 100%;
  .tag-btn {
    width: 1323px;
    display: flex;
    justify-content: space-between;
  }
  .order-conter {
    .order-data {
      margin: 20px 20px;
    }
    .el-tag {
      margin: 10px 10px;
    }
    /deep/ .order-from {
      width: 1330px;
      height: 70px;
      padding: 20px 0;
      border: 1px solid #001;
      margin: 0 18px;
      border-radius: 20px;
      .el-form {
        margin-top: 20px;
        padding-left: 4px;
      }
      .el-col-1 {
        text-align: center;
      }
      .el-picker-panel {
        top: 220px !important;
      }
    }
    .el-button + .el-button {
      margin-left: 0;
    }
    /deep/ .el-table__row {
      text-align: center;
    }
    .order-btn {
      margin: 100px;
    }
  }
  .el-header {
    padding: 0;
  }
}
</style>
